<template>
  <div>
    <Modal v-model="showModal" title="完善商品信息" width="996px" footer-hide :mask-closable="false">
      <Button type="primary" @click="addGood">选择商品</Button>

      <Form :model="item" :label-width="80" v-if="JSON.stringify(this.item) !== '{}'">

      <FormItem label="商品标题：" class="item-content" style="margin-bottom:5px;">
        <Input v-model="item.raw_title" style="width:100%;" v-if="maxTitleLength == 999 && minTitleLength == 1" />
        <Input v-model="item.raw_title" :maxlength="maxTitleLength" show-word-limit style="width:100%;" v-else />
      </FormItem>

        <FormItem label="商品ID：" class="item-content">
          <p class="lh32">{{ item.goods_id }}</p>
        </FormItem>
        <FormItem label="商品链接：" class="item-content">
          <p class="lh32">{{ item.detail_url }}</p>
        </FormItem>
        <FormItem label="商品价格：" class="item-content" v-if="item.view_price">
          <p class="lh32">{{ item.view_price }}</p>
        </FormItem>
        <FormItem label="商品图片：">
          <div class="iai-add-image__picture-main">
            <div class="ice-any-picker">
              <div
                class="ice-any-picker__trigger"
                v-for="(img, i) in pickerImgs"
                :key="i"
                style="line-height:150px;"
              >
                <div
                  class="ice-any-picker__trigger-btn"
                  :class="[{ 'ice-any-picker__trigger-btn-checked': img.checked }]"
                  :data-i="i"
                  :data-src="img.url"
                  :data-key="img.key"
                  @click="onPickerTriggerChecked(i)"
                >
                  <Icon type="md-checkmark" />
                </div>
                <div class="iai-add-image__resource-pic">
                  <div class="iai-add-image__resource-pic__cover">
                    <img :src="img.url" draggable="false" style="width:100%;" />
                  </div>
                </div>
              </div>
            </div>
            <Button type="text" @click="onAddItemImages">自主选择图片到商品图列表</Button>
          </div>
        </FormItem>
        <FormItem label="商品图片：">
          <div class="iai-add-image__selectbar" v-if="pickerSelectesImgs.length">
            <div class="iai-add-image__list">
              <div
                class="iai-add-image__selectbar-item"
                v-for="(img, i) in pickerSelectesImgs"
                :key="img.key"
              >
                <div class="iai-add-image__selectbar-item-cover">
                  <img :src="img.url" draggable="false" />
                </div>
                <div
                  class="iai-add-image__delete"
                  :data-i="i"
                  :data-key="img.key"
                  @click="onRmSelectItem"
                >
                  <Icon type="ios-close" />
                </div>
              </div>
            </div>
          </div>
        </FormItem>
        <FormItem label="商品描述：" class="item-content" style="margin-top:5px;">
          <Input v-model="item.description" type="textarea" :rows="3" :maxlength="maxDesLength" style="width:100%;" />
        </FormItem>
      </Form>
      <div class="ice-add-image-dialog-new__footer">
        <div class="ice-add-image-dialog-new__footer__limit"></div>
        <div class="ice-add-image-dialog-new__footer__operation">
          <Button type="primary" @click="onExportItem">确定</Button>
          <Button @click="onHide">取消</Button>
        </div>
      </div>
    </Modal>

    <ui-add-good
      :max-length="maxLength"
      :show="showAddGoodModal"
      :images="imagesList"
      :goodsType="goodsType"
      mode="radio"
      @on-visible-change="onVisibleGoodChange"
      @on-export="onExportGood"
      :needCrop="needCrop"
    />

    <ui-add-image
      :max-length="maxLength"
      :show="showAddImageModal"
      :images="imagesList"
      :CropType="CropType"
      mode="radio"
      @on-visible-change="onVisibleChange"
      @on-export="onExportImages"
      :needCrop="true"
    />

  </div>
</template>

<script>
import Setting from "@/setting";
import UiAddGood from "@/components/ui/UiAddGood.vue";
import UiAddImage from "@/components/ui/UiAddImage.vue";


export default {
  name: "ui-add-item",
  components: {
    UiAddGood,
    UiAddImage
  },
  props: {
    itemData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    goodsType: {
      type: String,
      default: "tb",
    },
    maxTitleLength: {
        type: Number,
        default: 999
    },
    minTitleLength: {
        type: Number,
        default: 1
    },
    maxDesLength: {
        type: Number,
        default: 999
    },
    minDesLength: {
        type: Number,
        default: 0
    }
  },

  data() {
    return {
      showModal: false,
      pickerImgs: [],
      pickerSelectesImgs: [],
      selectedKeys: [],

      maxLength: 9,
      minLength: 5,
      showAddGoodModal: false,
      imagesList: [],
      needCrop: false,

      item: {},

      showAddImageModal: false,
      CropType: "11",

      toChangeId: ''
    };
  },
  computed: {},
  watch: {
    itemData: {
      handler(newVal) {
        this.item = newVal
        this.pickerImgs = newVal.pickerImgs
        this.pickerSelectesImgs = newVal.pickerSelectesImgs
        this.toChangeId = newVal.toChangeId
      }
    }
  },
  methods: {
    init() {
      this.showModal = true;
      if (JSON.stringify(this.item) !== "{}") {
        this.pickerImgs = this.item.pickerImgs;
        this.pickerSelectesImgs = this.item.pickerSelectesImgs;
      } else {
        this.pickerImgs = [];
        this.pickerSelectesImgs = [];
      }
      //根据router.name不同，判断所在的页面
      if(this.$route.name == 'content_creation_publish_tb_haohuo'){//有好货
          this.minLength = 5;
          this.maxLength = 14;
      }
      if(this.$route.name == 'content_creation_publish_tb_toutiao'){//头条
          this.minLength = 5;
          this.maxLength = 14;
      }
    },
    delete() {
      this.item = {};
      this.pickerImgs = [];
      this.pickerSelectesImgs = [];
      this.toChangeId = ''
    },
    onExportItem() {
      if (this.pickerImgs.length == 0) {
        this.$Message.warning("请设置商品封面");
        return;
      }
      if (this.pickerSelectesImgs.length == 0) {
        this.$Message.warning("请点击商品图片设置商品主图");
        return;
      }

      if(this.maxTitleLength == 999 && this.minTitleLength == 1) {
        if(this.item.raw_title.length < 1) {
          this.$Message.warning({
              content: '商品标题不能为空',
              duration: 6
          });
          return
        }
      } else {
        const titleLength = this.item.raw_title.length
        if(titleLength < this.minTitleLength || titleLength > this.maxTitleLength) {
          this.$Message.warning({
              content: '商品标题字数限制在'+ this.minTitleLength +'-'+ this.maxTitleLength +'字之间',
              duration: 6
          });
          return
        }
      }

      if(this.minDesLength !== 0) {
        const desLength = this.item.description.length
        if(desLength < this.minDesLength || desLength > this.maxDesLength) {
          this.$Message.warning({
              content: '商品描述字数限制在'+ this.minDesLength +'-'+ this.maxDesLength +'字之间',
              duration: 6
          });
          return
        }
      }

      this.item.pickerImgs = this.pickerImgs;
      this.item.pickerSelectesImgs = this.pickerSelectesImgs;

      const covers = [];
      for (let key in this.item.pickerSelectesImgs) {
        covers.push(this.item.pickerSelectesImgs[key]["url"]);
      }
      this.item.covers = covers;
      this.item.pic_url = covers[0];
      this.item.toChangeId = this.toChangeId

      this.$emit("on-export", {
        item: this.item,
      });
      this.showModal = false;
    },
    onHide() {
      this.showModal = false;
    },

    // 选择商品
    addGood() {
      this.showAddGoodModal = true;
    },
    onVisibleGoodChange(res) {
      this.showAddGoodModal = res;
    },
    onExportGood(res) {
      const { images } = res;
      const data = images[0].desc_json;
      this.item = data;
      this.showAddGoodModal = false;
      var imgCovers = [];
      for (let key in data.images) {
        imgCovers.push({
          key: key,
          url: data.images[key],
          checked: key === "0",
        });
      }
      this.pickerImgs = imgCovers;
      this.pickerSelectesImgs = [imgCovers[0]];
      this.item.pic_url = imgCovers[0]["url"];
    },
    // 选择商品图片
    onPickerTriggerChecked(e) {
      this.pickerImgs = this.pickerImgs.map(function (item, index, arr) {
        item["checked"] = index == e;
        return item;
      });
      this.pickerSelectesImgs = [this.pickerImgs[e]];
    },

    onRmSelectItem(e) {
      const { key } = e.currentTarget.dataset;
      this.pickerSelectesImgs = this.pickerSelectesImgs.filter(
        (item) => item.key !== key
      );
      this.pickerImgs = this.pickerImgs.map((item) => {
        return {
          ...item,
          checked: item.key === key ? false : item.checked,
        };
      });
    },

    // 选择商品添加自主选择图片功能
    onAddItemImages() {
      this.showAddImageModal = true;
    },
    onVisibleChange(res) {
      this.showAddImageModal = res;
    },
    onExportImages(res) {
      const { images } = res;
      const data = images[0];
      this.showAddImageModal = false;
      const imgUrl =
        images[0].url +
        "?x-oss-process=image/crop,x_" +
        data.x +
        ",y_" +
        data.y +
        ",w_" +
        data.w +
        ",h_" +
        data.h;
      const apple = {
        key: JSON.stringify(this.pickerImgs.length),
        url: imgUrl,
        checked: false,
      };
      this.pickerImgs.unshift(apple);
    },
  },
};
</script>

<style>
.item-content {
  margin: 0;
  padding: 0;
}
</style>
<style lang="scss">
.iai-add-image__picture-sidebar {
  width: 140px;
  flex: 0 0 140px;
  overflow-y: auto;
  .ivu-menu-item-group-title {
    padding-left: 12px;
  }
}
.ice-add-image-dialog-new__footer__operation {
  display: flex;
  .ivu-btn {
    & + .ivu-btn {
      margin-left: 8px;
    }
  }
}
</style>
<style lang="scss" scoped>
.iai-add-image__picture-center {
  display: flex;
  height: 400px;
  border: 1px solid #e7e7e7;
}
.iai-add-image__picture-sidebar {
  width: 140px;
  flex: 0 0 140px;
  overflow-y: auto;
  .ivu-menu {
    height: 100%;
  }
}
.iai-add-image__picture-main {
  flex: 1;
}
.iai-add-image__picture-pagination {
  display: flex;
  justify-content: flex-end;
  padding: 12px 0;
}
.ice-any-picker {
  height: 150px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
}
.ice-any-picker__trigger {
  margin-left: 12px;
  padding-bottom: 12px;
  position: relative;
}
.iai-add-image__resource-pic {
  width: 145px;
  height: 145px;
  border: 1px solid #e7e7e7;
}
.iai-add-image__resource-pic__cover {
  height: 143px;
  width: 143px;
  overflow: hidden;
  img {
    max-width: 100%;
    max-height: 100%;
    opacity: 1;
    vertical-align: middle;
  }
}
.iai-add-image__resource-pic__title {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0 10px;
  line-height: 20px;
  padding-top: 5px;
}
.iai-add-image__resource-pic__pix {
  font-size: 12px;
  color: #999;
  padding: 0 10px;
  line-height: 20px;
}
.ice-any-picker__trigger-btn {
  width: 143px;
  height: 143px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  text-align: center;
  color: #fff;
  .ivu-icon {
    font-size: 28px;
    font-weight: bold;
    visibility: hidden;
  }
}
.ice-any-picker__trigger-btn-checked {
  background-color: rgba(#000, 0.5);
  .ivu-icon {
    visibility: visible;
  }
}
.main-cover {
  background-color: #2d8cf0;
  color: #fff;
}
.lh32 {
  line-height: 32px;
}
</style>